<script setup>
import _ from 'lodash'
import {onMounted, ref, watch} from "vue";
import {api} from "@jzl/api";
import {$WinDeptUsers} from "@jzl/comps-mg";
import {$jui} from '@jzl/utils'

const FORM_DFT = {
  users: [],
  roles: []
};

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  modId: {
    type: Number,
    default: null
  },
  isView: {
    type: Boolean,
    default: false
  }
})

const mformRef = ref(null)

const formLabelWidth = '120px';
const loading = ref(false)
const form = ref(_.cloneDeep(FORM_DFT))
const roles = ref([])

watch(() => props.show, (val) => {
  if (val) {
    init();
  }
})

onMounted(() => {
  init();
})

const init = async () => {

  loading.value = true;
  form.value = _.cloneDeep(FORM_DFT);
  mformRef.value.resetFields();

  let data = await api.role.getRoleList();

  loading.value = false;
  if (data) {
    roles.value = data;
  }
}

const getUserLabel = (u) => {
  let nickname = _.get(u, "nickname");
  let loginname = _.get(u, "loginname");
  let names = [];

  if (nickname) names.push(nickname)
  if (loginname) names.push(loginname);

  return names.join(" / ");
}

const handleRemoveUser = (u, idx) => {
  /*if(users.value?.length > idx) {
    users.value.splice(idx, 1)
  }*/
}

const showSelectUserWin = () => {
  $WinDeptUsers({
    mode: 'USER',
    onConfirm: async (data) => {
      let users = _.get(data, 'users');
      //  let ids = _.map(users, 'id');
      if (!users?.length) return;

      if (form.value?.users?.length) {
        for (let i = 0; i < users.length; i++) {
          let u = users[i];

          if (_.findIndex(form.value.users, {id: u.id}) < 0) {
            form.value.users.push(u)
          }
        }
      } else {
        form.value.users = users;
      }
    }
  });
}

const submit = async () => {
  if (!form.value?.users || form.value?.users?.length <= 0) {
    $jui.toast("请选择添加的用户！");
    return;
  }

  if (!form.value.roles || form.value.roles.length <= 0) {
    $jui.toast("请选择添加的角色！");
    return;
  }

  $jui.showLoading();

  let ids = _.map(form.value.users, "id");
  let ret = await api.adminmgr.assign(ids, form.value.roles);

  if (ret) {
    close(true);
    $jui.toast('操作成功！');
  }

  $jui.hideLoading();
}

const close = (flag) => {
  emit('close', flag);
}
</script>

<template>
  <el-form
    :model="form"
    ref="mformRef"
    style="min-width:500px;"
    :label-width="formLabelWidth"
  >
    <el-form-item
      label="选择用户"
      prop="nickname">
      <template v-if="form?.users?.length">
        <el-tag
          :key="u" v-for="(u, idx) in form.users"
          closable
          style="margin-right:5px;"
          :disable-transitions="false"
          @close="handleRemoveUser(u, idx)">
          <span style="display:inline-block;min-width: 100px;">{{ getUserLabel(u) }}</span>
        </el-tag>
      </template>
      <el-button
        type="primary"
        plain
        @click="showSelectUserWin()"
      >选择用户
      </el-button>
    </el-form-item>
    <el-form-item
      label="角色"
      prop="roles">
      <el-select
        v-model="form.roles"
        multiple
        placeholder="请选择"
        :disabled="isView"
        style="width: 280px;">
        <el-option
          v-for="item in roles"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item v-if="isView">
      <el-button
        type="primary"
        @click="close()"
        size="medium"
      >确 定
      </el-button>
    </el-form-item>
    <el-form-item v-else>
      <el-button
        type="primary"
        @click="submit()"
        size="medium"
      >确 定
      </el-button>
      <el-button
        @click="close()"
        size="medium"
      >取 消
      </el-button>
    </el-form-item>
  </el-form>
</template>
